<template>
  <el-space wrap :size="8">
    <template v-for="(item, index) in dataList">
      <div v-if="!readonly || modelValue == item.value" class="goods-type" :class="{ 'select': modelValue == item.value }" @click="handleClick(item)">
        <div class="name">{{ item.label }}</div>
        <div class="desc">{{ item.desc || item.label }}</div>
        <div class="icon" v-if="modelValue == item.value"></div>
        <SvgIcon class="icon-item" v-if="modelValue == item.value" icon="ep:check"/>
      </div>
    </template>
  </el-space>
</template>

<script setup lang="ts">

import { computed } from 'vue';
import { dictTypeMap } from '@/utils/global-dict.ts';
import { SvgIcon } from '@/components/icon';

const props = defineProps({
  modelValue: Number,
  readonly: {
    type: Boolean,
    default: false
  },
});

const dataList = computed(() => {
  return dictTypeMap['shop_goods_type'] || []
});

const emit = defineEmits(['change', 'update:modelValue']);
const handleClick = (item: any) => {
  if (props.readonly) {
    return
  }
  if (item) {
    emit('update:modelValue', item.value);
    emit('change', item.value);
  }
}

</script>

<style scoped lang="scss">
.goods-type {
  width: 120px;
  height: 60px;
  border-radius: var(--el-card-border-radius);
  border: 1px solid var(--el-card-border-color);
  background-color: var(--el-card-bg-color);
  float: left;
  text-align: center;
  padding-top: 8px;
  position: relative;
  cursor: pointer;
  line-height: 23px;

  .name {
    font-size: 14px;
    font-weight: 600;
    color: var(--el-text-color-primary);
  }

  .desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--el-text-color-regular);
  }

  .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid var(--el-color-primary);
    border-left: 26px solid transparent;
  }

  .icon-item {
    position: absolute;
    bottom: 0;
    right: 1px;
    color: var(--el-bg-color);
  }
}

.goods-type.select {
  border-color: var(--el-color-primary);
}
</style>
